<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>插值-模版语法-VUE</title>
		<script src="../assets/js/vue.js"></script>
		<link rel="stylesheet" href="../assets/css/baseStyle.css" />
	</head>
	<body>
		<div id="app">
			<!-- 普通文本使用mustache（双大括号）语法，数据双向绑定 -->
			<p>普通文本:{{msg}}</p>
			<!-- v-once指令只执行一次插值绑定，不会更新，但是会影响到该节点的其他数据绑定 -->
			<p v-once>v-once一次绑定：{{msg}}</p>
			<p>普通文本插入html代码：{{rawHtml}}</p>
			<p>使用v-html 指令：<span v-html="rawHtml"></span></p>
			<div v-bind:class="color">v-bind指令</div>
			<button v-on:click="chagneColor">点点试试</button>
			<p>{{ number + 1 }}</p>
			<p>{{ ok ? 'YES' : 'NO' }}</p>
			<p>{{ msg.split('').reverse().join('') }}</p>
			<!-- 可以用对象/数组/表达式的方式绑定多个样式
				 可以与基本类样式和行内类样式并存-->
			<!-- v-bind:class="{active: isActive,border:hasBorder}" -->
			<!-- 以变量的方式：v-bind:class="[showActive, showBorder]" -->
			<!-- 以字符的方式：v-bind:class="['active','border']" -->
			<!-- v-bind:class="[isActive ? 'active' : 'border']" -->
			<div class="pink"
			 v-bind:class="[isActive ? 'active' : 'border']"
			 style="width: 12.5rem;width: 12.5rem;text-align: center;
			 line-height: 12.5rem;">v-bind:class</div>
		</div>
		<script src="../assets/js/template.js"></script>
	</body>
</html>